<template>
  <view class="container">
    <view class="recordBox">
      <van-tabs v-model="active" @change="getChange">
        <van-tab title="提现中">
          <view class="recordBox_item" v-for="(item,i) in withdrawList1" :key="i">
            <view class="recordBox_item_top">
              <h1>提现</h1>
              <text>+{{item.totalAmount}}</text>
            </view>
            <view class="recordBox_item_bottom">
              <h1>{{item.createTime}}</h1>
              <text class="color">提现中</text>
            </view>
          </view>
        </van-tab>
        <van-tab title="已提现">
          <view class="recordBox_item" v-for="(item,i) in withdrawList2" :key="i">
            <view class="recordBox_item_top">
              <h1>提现</h1>
              <text>+{{item.totalAmount}}</text>
            </view>
            <view class="recordBox_item_bottom">
              <h1>{{item.createTime}}</h1>
              <text>已提取</text>
            </view>
          </view>
        </van-tab>
      </van-tabs>
    </view>

  </view>
</template>

<script>
  import {
    getWithdraw
  } from "@/api/attestation.js"
  export default {
    data() {
      return {
        active: 0,

        currTab: 0,

        current: 1,
        size: 20,
        total: 0,

        withdrawList1: [],
        withdrawList2: [],
      };
    },
    onReachBottom() {
      if (this.current * this.size >= this.total) return
      this.current++
      this.getWithdrawList()
    },
    onLoad() {
      this.getWithdrawList()
    },
    methods: {
      getWithdrawList() {
        const query = {
          current: this.current,
          size: this.size
        }
        getWithdraw(query).then(res => {
          res.data.records.forEach(item => {
            if (item.status == 1) {
              this.withdrawList1.push(item)
            } else if (item.status == 3) {
              this.withdrawList2.push(item)
            }
          })
          this.total = res.data.total
        })
      },
      getChange(e) {
        this.current = 1
        this.withdrawList1 = [],
          this.withdrawList2 = [],
          // this.currTab = e.detail.index
          this.getWithdrawList()
      }
    },
  }
</script>

<style lang="scss">
  page {
    background-color: rgba(245, 245, 245, 1);
  }

  .color {
    color: rgba(255, 87, 51, 1) !important;
  }

  .recordBox {
    .recordBox_item {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      width: 702rpx;
      height: 192rpx;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      margin: 30rpx 24rpx;
      padding: 40rpx 50rpx;

      .recordBox_item_top {
        display: flex;
        justify-content: space-between;

        h1 {
          font-size: 34rpx;
          color: rgba(61, 61, 61, 1);
        }

        text {
          font-size: 40rpx;
          color: rgba(61, 61, 61, 1);
        }
      }

      .recordBox_item_bottom {
        margin-top: 15rpx;
        display: flex;
        justify-content: space-between;

        h1 {
          font-size: 28rpx;
          color: rgba(61, 61, 61, .5);
        }

        text {
          font-size: 28rpx;
          color: rgba(61, 61, 61, .5);
        }
      }
    }
  }

  /deep/.van-tab {
    color: rgba(61, 61, 61, .5);
  }

  /deep/.van-tabs__line {
    width: 50rpx !important;
    left: 70rpx !important;
    // transform: translateX(160rpx) !important;
    background-color: rgba(253, 211, 56, 1) !important;
  }

  /deep/.van-tab--active {
    font-weight: 600;
    color: rgba(61, 61, 61, 1);
  }
</style>
